import 'package:flutter/material.dart';
import 'views/message.dart';
import 'views/address.dart';
import 'views/find.dart';
import 'views/me.dart';
import 'package:curved_navigation_bar/curved_navigation_bar.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "flutter learning",
      home: MyStatefulWidget(),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  MyStatefulWidget({Key key}) : super(key: key);

  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> with TickerProviderStateMixin{
  List <Widget> pageList =[
    MessagePage(key: new Key('message')),
    AddressPage(key: new Key('address')),
    FindPage(key: new Key('find')),
    MyPage(key: new Key('me')),
  ];
  num pageIndex = 0;
  num lastIndex = 0;
  GlobalKey _bottomNavigationKey = GlobalKey();
  AnimationController aniController;
  Animation<Offset> _offsetAnimation;
  double translateX= 1.0;

  @override
  void initState() {
    super.initState();
    aniController = AnimationController(
      duration: const Duration(milliseconds: 350),
      vsync: this,
    );
    _offsetAnimation = Tween<Offset>(
      begin: const Offset(1, 0.0),
      end: Offset.zero,
    ).animate(CurvedAnimation(
      parent: aniController,
      curve: Curves.easeInOut,
    ))
    ..addStatusListener((status) {
      if(status == AnimationStatus.completed){
        lastIndex = pageIndex;
      }
    });
    aniController.value = 1.0;
  }
  
  @override
  void dispose() {
    aniController.dispose();
    super.dispose();
  }

  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          pageList[lastIndex],
          SlideTransition(
            position: _offsetAnimation,
            child: pageList[pageIndex],
          ),
        ]
      ),
      backgroundColor: Colors.blueGrey.shade200,
      bottomNavigationBar: CurvedNavigationBar(
        key: _bottomNavigationKey,
        index: 0,
        height: 50.0,
        items: <Widget>[
          Icon(Icons.list, size: 30),
          Icon(Icons.compare_arrows, size: 30),
          Icon(Icons.call_split, size: 30),
          Icon(Icons.perm_identity, size: 30),
        ],
        color: Colors.white,
        buttonBackgroundColor: Colors.white,
        backgroundColor: Colors.blueAccent,
        animationCurve: Curves.easeInOut,
        animationDuration: Duration(milliseconds: 350),
        onTap: (index) {
          if(index == pageIndex){
            return;
          }
          aniController.value = 0.0;
          setState(() {
            pageIndex = index;
            aniController.forward();
          });
        },
      ),
    );
  }
}